<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/list.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.min.css">
		 <script src="../../js/app.js"></script>
		 <script src="../../js/upload.js"></script>
		 <!--<link href="../css/style.css" rel="stylesheet" />-->
		 <!--<link href="../css/icons-extra.css" rel="stylesheet"/>-->
<!--<link rel="stylesheet" href="../tongxun/css/message.css" type="text/css" />-->
<style type="text/css">
.mui-content{
	margin-bottom: 40px;
}
.speak{
	/*输入框居中漂浮*/
position: fixed;
width:100%;
top:50px;
/*left:50%;*/
margin: auto auto;
padding: 0 5px;
text-align: center;
		 			}
    /*小盒子内容区的样式，display:inline-block：实现 效果*/
   p{
   	line-height: 1.2em;
   }
/*.con{
	margin: 1px;
}
.con .pic{ border-radius:2px;float:left; min-height:100px;box-shadow:2px 2px 6px #b5b5b5;line-height:1.2;margin: 2px;padding:2px;}
.con p{
	margin-bottom: 2px;
}
.con h5{padding:1px;margin-top: -2px;border-bottom:1px solid #ddd;}
.con h5 a{text-decoration:none;color:#999;}*/
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">详情</h1>
</header>
    <div class="mui-content" >
    	<div id="neirong" class="mui-content-padded ">
    	<li id="head"><p>发布时间</p>
    	</li>
    	<div  style="text-indent:25px;" id="contents"></div>
    	<div id="picture"style="margin-left: 0;" ><span id="img" class="slide-box"></span><span><img onclick="imgup()" style="width:80px;" src="../../images/iconfont-tianjia.png"/></span></div>
    	<li id="lower" style="width:100%;height:35px;font-size:0.8em;border-bottom: 1px solid #E3E3E3;text-align:center;">评论</li>
     	<div id="relation">
     		<!--关联信息-->
     	</div>
     	</div>
     	<div id="speak" class="speak" style="display:none;background: #DDDDDD;">
			<p style="margin:auto auto;font-size: 1.2em;color:#EC971F">请输入修改内容</p>
			<textarea id="contentnew" type="text"rows="10"placeholder="请输入"></textarea>
			<div style="margin-top: -24px;border-radius:5px;">
			<input id="pubish" style="font-size: 18px;margin: 2px 5px;padding:0 10px;float: right;" value="确认" type="submit">
			<input  style="font-size: 18px;margin: 2px 5px;float: right;padding:0 10px;" value="取消" type="submit" onclick="javascript:(document.getElementById('speak').style.display='none')">
			</div>
		</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/common.js"></script>
<script type="text/javascript">
   mui.init();
   contentnew=document.getElementById('contentnew');
   //发布回复输入框控制
function speak(tid,key){
	contentnew.value=document.getElementById("content").innerText;
	document.getElementById('speak').style.display='block';//显示输入框
	var tid=tid||'';
		document.getElementById('pubish').onclick=function(){
			document.getElementById('speak').style.display='none';//隐藏发布按钮
			modify(tid,key);
			}
} 
function modify(tid, type){
	//k=键；act=修改方法，tid=主题id，type=修改类型；
	apptoken['k']= type||'';
	if(type=='content' || type==''){//如果修改的页面是内容多行文本，将会替换换行符
	apptoken['v']=getFormatCode(contentnew.value) ||'';
	}else{
		apptoken['v']=contentnew.value ||'';
	}
	apptoken['tid']=tid;//获取详情id
	apptoken['act']='modify';//获取详情i
mui.post(home.hos+'/news/admin',apptoken,function(data){
	alert(JSON.stringify(data));
	result=JSON.parse(data);//获取信息
	if(isJSON(data)){//判断如果返回是json对象
	plus.ui.toast('修改成功');
	document.getElementById(type).innerHTML=contentnew.value;
	}else{
		alert('操作失败，服务器故障');
	}
})
}
//var data=localStorage.getItem('newsdetail') ;
var neirong=document.getElementById('neirong');
apptoken['tid']=tid;//获取详情id
apptoken['act']='detail';//获取详情i
mui.post(home.hos+'/news?act=detail&tid='+apptoken['tid'],apptoken,function(data){
//      	alert(data+apptoken['tid']);
	result=JSON.parse(data);//获取信息
	contentnew.value=result.content;
//	alert(result.content);
	jsonarrfor(result);
	_relation(result.relation,result.relation_id);//加载关联信息
})
mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var abc = self.abc;
//              alert(abc);
    //关闭等待框
    plus.nativeUI.closeWaiting();
    //显示当前页面
    mui.currentWebview.show();
});
        
function goRelation(relation,relation_id){//进入关联页面
	apptoken['relation']=relation;//请求类型
	apptoken['relation_id']=relation_id;//关联id
	 mui.post(home.hos+'/relation',apptoken,function(data){//获取关联数据
	 	if(JSON.parse(data).status==200){
	 		localStorage.setItem(relation+"detail",data);//关联信息存入数据库
	 		mui.openWindow('../'+relation+'/detail.html');//进入关联页面
	 	}else{
	 		alert('信息不存在，或其他错误，打开失败');
	 	}
	})
	}
function _relation(result,relation_id){//关联模块
	var relation=400;
	if(result=='item'){
		relation='项目';
	};
	if(relation==400){return false;}
	document.getElementById('relation').innerHTML='<li onclick="goRelation(\''+result+'\','+relation_id+')" style="padding: 5px;background: #EC971F;border-bottom: 1px solid #E3E3E3; font-size:20px;text-align:center; color:#F2F2F2"><span style=""><i class="fa fa-hand-o-right fa-fw"></i>进入'+relation+'页<i class="fa fa-hand-o-left fa-fw"></span></li>';
};//加载关联信息
function jsonarrfor(result){
var classimg='';
var vals='';
var pic="";
			if(result.img===null || result.img==='' || result.img==='undefined')
			{
				pic='';
			}else{
				pd=result.img.indexOf(",")==-1;//判断字符串里是否含有逗号如果不含有
				if(pd!=-1)
				{//如果有逗号即可分割字符串
							var rpic=result.img.split(",");//图片名
//							var type=result.type.split(",");//图片后缀
							if(rpic.length>=3){
								classimg="imgx3";
							}else
							if(rpic.length==2){
								classimg="imgx2";
							}else
							if(rpic.length==1){
								classimg="imgx1";
							}else{
								classimg="";
							}
					for(var ib=0;ib<rpic.length;ib++)
					{
						imgplay(rpic[ib],result.id);
					}
				}
				}
					if(!result.headimg){
						headimg=home.uploads+"/user/a.jpg";
					}else{
						headimg=home.uploads+"/img/user/"+result.headimg;
					}
					detailstyle(result.id,result.username,result.refresh,result.content,result.comment,result.zan,result.collect);//推送到样式函数
}
function detailstyle(tid,username,createtime,content,comment,zan,collect){
	if(createtime==''){//如果时间不存在调用系统当前时间
		var createtime=new Date().format("yy-MM-dd/h:m");
	}else{
	var createtime=new Date(parseInt(createtime) * 1000).format('yyyy-MM-dd hh:mm:ss');//转换时间戳
	}
	vals='<li><p>发布人：'+username+'|发布时间：'+createtime+'</p></li>';
	document.getElementById("head").innerHTML=vals;
	document.getElementById("contents").innerHTML='<span style="color: #DD524D;"onclick="speak('+tid+',\'content\')">[编辑]</span><span id="content">'+content+'</span>';
	document.getElementById("lower").innerHTML='<div style="width: 33%;float:left"onclick="speak()" >评论：<span id="commentnum">'+comment+' </span></div><div style="width: 33%; float:left"onclick="zan(\'1\','+tid+')"><i class="fa fa-thumbs-o-up fa-1x"></i>：<span id="zannum">'+zan+'</span></div><div style="width: 33%;float:left"onclick="collect('+tid+')">收藏：<span id="collectnum'+tid+'">'+collect+'</span></div>';
}
function imgdelete(img,tid){
	if (confirm("确定要删除这张图片吗？")) { 
//	delete_html("con"+img);
	apptoken['tid']=tid;
	apptoken['img']=img;
//	apptoken['type']=type;
	apptoken['act']='deleteimg';
//	alert(JSON.stringify(apptoken));
	mui.post(home.hos+'/news/admin',apptoken,function(data){//获取关联数据
//		alert(data);
	 	if(data==1){
	 		var tid=document.getElementById('con'+img);
			tid.parentNode.removeChild(tid);//窗口文档中删除图片div
	 		plus.ui.toast('删除成功');
	 	}else{
	 		plus.ui.toast('操作失败');
	 	}
	})
	 } 
    else { 
      plus.ui.toast('操作取消'); 
    } 
}
var type=64;//可不填。返回类型（file/64base）;
var imgnames='imgs';//img对应的name值
var upload=new uploadimg(imgsplay,type);//实例化类
function imgsplay(path){//两个参数path必填是图片路径，type=64可填，返回数据类型。默认不填返回图片源文件,64=返回64base压缩类型
if(type===64){//判断是否需要64base转码压缩
		var image = new Image();
			image.src = path;  
			image.onload = function(){
			var img_typearr=['jpeg','jpg','bmp','png'];//支持格式类型
			_type=upload.appendFile(img_typearr,path);//检查是否支持,返回false 或者后缀名
			if(_type){
			var is_type="image/jpeg";//压缩格式
			var ratio=0.9;//压缩质量
			var width=1080;//压缩后最长边距像素；
		    path = compress(image,width, ratio,is_type);//压缩图片转成64base后显示
		    img=document.getElementById('img');
		    apptoken['img']=path;
		    apptoken['act']='upimg';
		    mui.post(home.hos+'/news/admin',apptoken,function(data){//获取关联数据
//		    	alert(data); 
		    	if(isJSON(data)){
		    		var imgarr=JSON.parse(data);
				    var status=imgarr['status'] || '';
				    if(imgarr.status==200){
				    	 imgplay(imgarr.img,apptoken['tid']);//图片追加到html
				 		plus.ui.toast('上传成功');
				 	}else{
				 		plus.ui.toast('上传失败');
				 	}
		    	}else{
		    		alert('打开失败，请从新尝试');
		    		return false;
		    	}
		    
		})
			}
return false;}
}else{
	 alert('不支持的类型'+path);
//	imgplay(path);
}
};
function delete_html(thisid){
//	alert(thisid);
	var tid=document.getElementById(thisid);
//	img=document.getElementById("img").getElementsByName;
//	alert(document.getElementById(thisid).innerHTML);
	tid.parentNode.removeChild(tid);//删除div
}
function imgplay(imgname,tid){//把图片追加到窗口
	html='<li class="pic"  id="con'+imgname+'" style="max-width:100px;min-height:10px;padding:3px;position:relative" ><p style="position:absolute;background:#FF6A6A;text-align:center;border-radius:6px;color:#fff;padding:2px;width:18px;height:18px;">X</p><img id="'+imgname+'" style="margin:0;width:100%;max-width:100px;" onclick="imgdelete(\''+imgname+'\',\''+tid+'\')" src="'+home.uploads+'/img/news/min'+imgname+'" onerror="this.onerror=null;this.src=\'../../images/logo.png\'"  /></li>';
//	document.getElementById("img").innerHTML+=html;
	appendChild("img",html,'1');
}
function imgup(){
	var cs=document.getElementById("img").getElementsByTagName("li");
		var maxnum=9-cs.length;//限制上传图片数量
		var lasnum=9-cs.length;
		if(lasnum<=0){
			alert('最多只能上传9张图片');
			return false;
		}
	var lasnum=maxnum-document.getElementsByName(imgnames).length;
	upload.addImage(maxnum,lasnum,'neirong');//图片img外层id
}
  </script>
 </body>
  </html>